<template>
  <div class="dialog">
    <!-- 这里的内容写死就不灵活了,所以用一个占位符来占位 -->
    <!-- 父组件在使用子组件的时候,给子组件传递结构,传递什么结构,就展示什么结构-->
    <!-- 这个占位符叫做插槽 -->

    <!-- 指定了具体的name的插槽,叫做具名插槽 -->
    <!-- 第一个插槽,用于接收标题 -->
    <slot name="title"><h4>提示</h4></slot>
    <hr />
    <!-- 第二个插槽,用于接收对话框的内容 -->
    <!-- 包含有除name以外的其他属性的插槽，叫做作用域插槽 -->
    <slot name="content" uname="zs" age="20"></slot>
    <hr />

    <!-- 没有指定name的插槽,叫做默认插槽 -->
    <!-- 第三个插槽,用于接收按钮,没有指定name的插槽,相当于name="default"-->
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.dialog {
  border: 3px solid #000;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 5px;
  margin: 10px;
}
</style>